<template>
  <div class="ccui-home-index">
    <div class="ccui-app-container">
      <!-- 高级搜索 -->
      <div class="ccui-advanced-search-wrapper ccui-clearfix">
        <el-search
          :formProp="formData"
          @search="search"
          @change="change"
          :isShowSearch="true"
          :selectClear="true"
          class="ccui-highsearch no-print"
          @resetForm="resetForm"
        >
          <tabToggle
            :tabBtn="tabBtn"
            :isActive="isActive"
            @tabChange="tabChange"
            :totalNum="totalNum"
          />

          <div class="ccui-extend-btn">
            <el-button
              type="primary"
              @click="handleGoNew"
              icon="icon-ccui-add-sup"
              >新增</el-button
            >
          </div>

          <template slot="search">
            <el-input
              v-model="formData.writeoffName"
              clearable
              searchLabel="冲销单名称"
              placeholder="请输入冲销单名称模糊查询"
              @blur="handleTrim('writeoffName')"
            />

            <el-input
              v-model="formData.writeoffCode"
              clearable
              searchLabel="冲销单编号"
              placeholder="请输入冲销单编号模糊查询"
              @blur="handleTrim('writeoffCode')"
            />

            <el-input
              v-model="formData.exwarehouseCode"
              clearable
              searchLabel="出库单编号"
              placeholder="请输入出库单编号模糊查询"
              @blur="handleTrim('exwarehouseCode')"
            />

            <el-input
              v-model="formData.reportInOrgName"
              clearable
              searchLabel="填报单位"
              placeholder="请输入填报单位模糊查询"
              @blur="handleTrim('reportInOrgName')"
            />

            <el-input
              v-model="formData.warehouseName"
              clearable
              searchLabel="仓库"
              placeholder="请输入仓库模糊查询"
              @blur="handleTrim('warehouseName')"
            />

            <el-select
              v-if="isActive === 0"
              v-model="formData.exwarehouseStatus"
              searchLabel="单据状态"
              placeholder="请选择单据状态"
              clearable
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-date-picker
              v-model="formData.reportTime"
              searchLabel="编制日期"
              clearable
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              slot="searchItem7"
            />
          </template>

          <el-input
            v-model="formData.writeoffCode"
            clearable
            searchLabel="冲销单编号"
            placeholder="请输入冲销单编号模糊查询"
            slot="searchItem2"
            @blur="handleTrim('writeoffCode')"
          />

          <el-input
            v-model="formData.writeoffName"
            clearable
            searchLabel="冲销单名称"
            placeholder="请输入冲销单名称模糊查询"
            slot="searchItem1"
            @blur="handleTrim('writeoffName')"
          />

          <el-input
            v-model="formData.exwarehouseCode"
            clearable
            searchLabel="出库单编号"
            placeholder="请输入出库单编号模糊查询"
            slot="searchItem3"
            @blur="handleTrim('exwarehouseCode')"
          />

          <el-input
            v-model="formData.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
            slot="searchItem4"
            @blur="handleTrim('reportInOrgName')"
          />

          <el-input
            v-model="formData.warehouseName"
            clearable
            searchLabel="仓库"
            placeholder="请输入仓库模糊查询"
            slot="searchItem5"
            @blur="handleTrim('warehouseName')"
          />

          <el-select
            v-if="isActive === 0"
            v-model="formData.exwarehouseStatus"
            searchLabel="单据状态"
            placeholder="请选择单据状态"
            slot="searchItem6"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <el-date-picker
            v-model="formData.reportTime"
            searchLabel="编制日期"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            slot="searchItem7"
          />
        </el-search>
      </div>
      <!-- table表格 -->
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :data="tableData"
          :fit="true"
          :cell-style="cellStyle"
          border
          class="ccui-multifunctional-table"
          @header-dragend="setTableTitleWidth"
          @row-click="handleRowClick"
          ref="tableListAll"
        >
          <template v-for="(table, index) in tableTheadOptions">
            <el-table-column
              :fixed="table.fixed || false"
              :key="index"
              :type="table.type"
              :label="table.label"
              :min-width="table.width"
              :prop="table.prop"
              :align="table.align || 'left'"
              :header-align="table.headerAlign || 'left'"
              :filters="table.filters"
              :formatter="formatterList[table.formatterName]"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </template>

          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="{ row }">
              <el-button
                v-if="
                  ['待提交', '已撤回', '审批退回'].includes(
                    row.exwarehouseStatus
                  )
                "
                size="mini"
                type="text"
                @click="handleGoEdit(row)"
                >编辑
              </el-button>

              <el-button
                v-if="row.exwarehouseStatus == '审批中'"
                size="mini"
                type="text"
                @click="getRevoke(row)"
                >撤回
              </el-button>

              <el-button
                v-if="['待提交', '已撤回'].includes(row.exwarehouseStatus)"
                size="mini"
                type="text"
                @click="handleDelete(row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ccui-table-footer" v-show="tableData.length > 0">
          <div id="ccui-paging">
            <el-pagination
              :total="totalNum"
              :page-size="pageSizeCode"
              :current-page="pageNoCode"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @prev-click="handlePrev"
              @next-click="handleNext"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleSizeChange('none')"
              >确定
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabToggle from "@/app/financial/financialOutbound/components/tabToggle";
import listMixin from "@/app/financial/financialOutbound/mixin";
import js from "../js";
export default {
  name: "all",
  mixins: [listMixin],
  components: {
    tabToggle
  },
  data() {
    return {
      isActive: 0,
      // 2：待提交、4：已撤回、3：审批中、6：审批退回、5：审批通过、21：冲销中、22：已冲销
      statusOptions: js.statusOptions
    };
  }
};
</script>

<style scoped>
</style>
